<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>发布通知</b>
            </div>
        </template>

        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="发布人" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="level">
                <el-select v-model="form.level" placeholder="请选择通知级别">
                    <el-option label="信息" value="信息" />
                    <el-option label="提示" value="提示" />
                    <el-option label="警告" value="警告" />
                </el-select>
            </el-form-item>
            <el-form-item label="发布内容" prop="content">
                <WEditor :defaultText="form.content" @richHtml="getRichHtml" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">发布</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { ElMessage } from "element-plus";
import {
    getCurrentInstance,
    onBeforeMount,
    reactive,
    ref,
    computed,
} from "vue";
import WEditor from "../../components/WEditor.vue";
import { notifyService } from "../../interfaces/service";

export default {
    components: { WEditor },
    setup() {
        const { proxy } = getCurrentInstance();

        onBeforeMount(() => {
        })

        // 表单引用
        const formRef = ref(null);
        // 表单对象值
        const form = reactive({
            title: "",
            name: "",
            type:"",
            content: "",
            level: "信息",
        });

        // 表单验证
        const rules = reactive({
            title: [
                {
                    required: true,
                    message: "标题不能为空",
                    trigger: "change",
                },
                { min: 3, max: 20, message: "最少3个字, 最多20个子", trigger: "blur" },
            ],
            name: [
                {
                    required: true,
                    message: "发布人不能为空",
                    trigger: "blur",
                },
            ],
            content: [
                {
                    required: true,
                    message: "内容不能为空",
                    trigger: "blur",
                },
                { min: 5, max: 500, message: "最少5个字, 最多500个子", trigger: "blur" },
            ],
        });

        const submitForm = (formEl) => {
            if (!formEl) return;
            console.log(`发布信息: ${form}`);
            formEl.validate((valid, fields) => {
                if (valid) {
                    notifyService.addNotify(form).then(res => {
                        if (res.success) {
                            console.log(res);
                            ElMessage.success("发布成功");
                            resetForm(formEl);
                        }
                    })
                    console.log("submit!");
                } else {
                    console.log("error submit!", fields);
                }
            });
        };

        const resetForm = (formEl) => {
            if (!formEl) return;
            formEl.resetFields();
        };

        // 编辑器
        const getRichHtml = nv => {
            form.content = nv
        };

        return { formRef, form, rules, submitForm, resetForm, getRichHtml };
    },
};
</script>

<style lang="scss" scoped></style>
